// import React, { Component,createRef } from 'react'
// import './app.css'
// export default class App extends Component {
//   render() {
//     const boxEle=createRef()
//     return (
//       <div>
//          <div className="box" ref={boxEle} onClick={()=>{
//            //console.log('boxEle',boxEle.current);
//            boxEle.current.style.transition="all .2s"
//            boxEle.current.style.transform="translate(100px,0)"
//          }}></div>
//       </div>
//     )
//   }
// }


import React, { Component,createRef} from 'react'
import './app.css'
export default class App extends Component {
  constructor(props){
    super(props)
    this.boxEle=createRef()
  }
  changeBox=()=>{
    this.boxEle.current.style.transition="all .5s"
    this.boxEle.current.style.transform="rotate(360deg)"
  }
  render() {
    return (
      <div>
        <div className="box" ref={this.boxEle} onClick={this.changeBox}>Giles</div>
      </div>   
    )
  }
}

